<template>
  <div>
    <el-dialog
      title="登录系统"
      :visible.sync="dialogFormVisible"
      :show-close="false"
      :center="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 登录表单 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-owner"
      >
        <!-- prop: 规则映射 -->
        <el-form-item label="用户名" prop="uname">
          <el-input v-model="ruleForm.uname"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <div>
          <el-form-item label="登录类型">
            <el-radio v-model="ruleForm.radio" label="1">业主</el-radio>
            <el-radio v-model="ruleForm.radio" label="2">管理员</el-radio>
             <el-radio v-model="ruleForm.radio" label="3">工作人员</el-radio>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
          <el-button @click="toForgetPw">忘记密码</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        uname: "",
        password: "",
        radio: "1"
      },
      rules: {
        // 规则的映射，required:必填项,message:提示信息,trigger:触发事件
        uname: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      },
      dialogFormVisible: true,
      formLabelWidth: "120px"
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //前端表单数据验证
          //post方法
          console.log(this.ruleForm)
          this.axios
            .post("user/dologin", this.ruleForm)
            .then(res => {
              if (res.data == "success-owner") {
                // //全局存储token，关闭浏览器会清除
                sessionStorage.setItem("token", 'true');
                sessionStorage.setItem("userId",this.ruleForm.uname)
                console.log(sessionStorage.getItem("token"))
                //登录验证正确后进入业主系统
                this.$router.push("/index_owner");
              } 
              else if(res.data=="success-manager"){
                // //全局存储token，关闭浏览器会清除
                sessionStorage.setItem("token", 'true');
                sessionStorage.setItem("userId",this.ruleForm.uname)
                //登录验证正确后进入业主系统
                this.$router.push("/index_manager");

              }
              else if (res.data=="success-worker") {
                sessionStorage.setItem("token","true");
                sessionStorage.setItem("userId",this.ruleForm.uname);
                this.$router.push("/index_worker");
              }
              else if(res.data=="SuperlativeManage"){
                sessionStorage.setItem("token","true");
                sessionStorage.setItem("userId",this.ruleForm.uname);
                this.$router.push("/index_manager/tagehead")
              }
              else if (res.data == "error") {
                this.$alert("账号不存在或错误", {
                  confirmButtonText: "确定"
                });
                //清除内容
                this.$refs[formName].resetFields();
              }
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });


            
        } else {
          //验证错误信息
          console.log("error submit!!");
          return false;
        }
      });
    },
    //忘记密码的跳转
    toForgetPw() {
      this.$router.push({
        //传参用router，接参用route
        path: "/forgetpw"
      });
    }
  },
  created(){
    //清
    sessionStorage.removeItem("token");
    sessionStorage.removeItem("userId");
    sessionStorage.removeItem("userName");
    sessionStorage.removeItem("star")
    //添加修改密码的active
    sessionStorage.setItem("active",0);

    // sessionStorage.removeItem("forgetid");


  },
  components: {}
};
</script>

<style>
</style>
